<template name="goodspoor">
	<view style="width: 100%;min-height: 100vh;overflow: hidden;"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">
		<view class="padding-top-50 padding-left-40 flex-between h-150">
			<view class="">
				<image class="w-80 h-80" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit" @click="back">
				</image>
			</view>

			<view class="">
				<image class="w-200 h-100" :src="Imgbase + '/new_goodinf_img1.png'" mode="aspectFit">
				</image>
			</view>
		</view>

		<view class="h-100">
			<scroll-view scroll-x class="nav Afont padding-top-20 padding-left-30 h-80" scroll-with-animation
				:scroll-left="scrollLeft">
				<view class="sw_choose_default" :class="index==TabCur?'sw_choose':'sw_nochoose'"
					v-for="(item,index) in tap" :key="index" @tap="tabSelect" :data-id="index">
					{{tap[index]}}
					<view class="h-6 w-40" style="background-color: #8A5E51;margin: 10rpx auto 0;"
						v-show="index==TabCur">

					</view>
				</view>
			</scroll-view>
		</view>

		<view class="">
			<scroll-view scroll-y class="w100 reach padding-left-20 " scroll-with-animation style="overflow: hidden;"
				@scrolltolower="onbottom()">
				<view class="w100 h-20">

				</view>

				<view class=" h-250 margin-bottom-60 list_item radius-22" v-for="(item,index) in list" :key="index"
					@click="showGood(item.id)">
					<view class="">
						<image class="w100 h-170 radius-22" :src="item.sub_adimage" mode="aspectFill">
						</image>
					</view>

					<view class="flex padding-left-20 padding-right-20">
						<view class="padding-right-10">
							<view class="Afont font-22 one-line w-260">
								{{item.name}}
							</view>
							<view class="price Bfont font-24 padding-top-10">
								￥{{item.cost}}
							</view>
						</view>

						<view class="w-70 h-65 font-14 flex-center Cfont padding-top-20"
							:style="{background:'url('+Imgbase+'/new_goodinf_img2.png)','background-size':'100% 100%',}"
							style="min-width: 70rpx;">
							{{item.number}}轮
						</view>

						<view class="zinde Cfont font-18 padding-left-60">
							<!-- item.box_limit_num -->
							<view class="df alc " v-if="item.havebox == 1">
								<view class="w-70 font-weight-500" style="color: #895D4E;">
									BOX
								</view>
								<view class="heng ">
									<view class="h100 its"
										:style="[{ width:Number(item.ordercount/item.box_limit_num).toFixed(2)*100+ '%'}]">

									</view>
									<view class="numd">
										{{item.ordercount}}
									</view>
								</view>
							</view>
							<view class="df alc margin-top-15" v-if="item.havebox2 == 1">

								<view class="w-70 font-weight-500" style="color: #895D4E;">
									MBOX
								</view>
								<view class="heng margin-right-20">
									<view class=" h100 its2"
										:style="[{ width:Number(item.ordercount2/item.box_limit_num2).toFixed(2)*100 + '%'}]">
									</view>
									<view class="numd">
										{{item.ordercount2}}
									</view>
								</view>
							</view>
						</view>
					</view>


					<view class="posimg h-300">
						<image class="w100 h100" :src="Imgbase + '/new_goodinf_img4.png'" mode="aspectFit">
						</image>
					</view>
				</view>

				<view class="w100 h-70">

				</view>
			</scroll-view>
		</view>



	</view>
</template>
<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				TabCur: 0,
				scrollLeft: 0,
				tap: [],
				ids: [],
				list: [],
				hasData: false,
			};
		},
		onLoad() {
			this.loadtypes()
		},
		methods: {
			// 触底刷新列表
			onbottom() {
				let _this = this
				_this.page++;
				this.poorlist();
			},
			showGood(id) {
				uni.navigateTo({
					url: `/pagesA/infinite/poordetail?id=${id}`
				});
			},
			back() {
				uni.navigateBack()
			},
			tabSelect(e) {
				this.small_list = []
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.poorlist();
			},
			// 标签
			loadtypes() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckgoods/type',
					data: {
						type: 1,
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.page = 1;
						_this.list = [];
						_this.hasData = true;
						_this.tap = res.data.data.names;
						_this.ids = res.data.data.ids;
						_this.poorlist();
					}
				});
			},
			// 奖池列表
			async poorlist() {
				let _this = this;
				let item = await this.$api.post('Infinite/poorlist', {
					page: _this.page,
					id: _this.ids[_this.TabCur],
					keyword: '',
					orderid: '',
					token: uni.getStorageSync('token'),
				})
				// if (isfresh == true) {
				// 	_this.list = [];
				// }
				for (let i = 0; i < item.data.list.length; i++) {
					_this.list = _this.list.concat(item.data.list[i])
				}
				console.log(_this.list)
				if (item.data.list = [] && _this.page > 1) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '没有更多了'
					// });
				}

			},
		},
	}
</script>

<style lang="less" scoped>
	.price {
		color: #e60000;
	}

	.heng {
		background-color: #F5F5F5;
		width: 200rpx;
		height: 18rpx;
		border-radius: 10rpx;
		overflow: hidden;
		border: 2rpx solid #fff;
		position: relative;

		.numd {
			position: absolute;
			right: 15rpx;
			top: 0rpx;
			z-index: 99;
			color: #000;
			font-weight: bold;
			font-size: 13rpx;
		}

		.its {
			background-color: #2B9C35;
			border-radius: 10rpx;
		}

		.its2 {
			background-color: #ECBD37;
			border-radius: 10rpx;
		}
	}

	.list_item {
		background-color: #F0E3CE;
		position: relative;
		box-shadow: 0rpx 1rpx 15rpx 0rpx #4e4e4e;
		width: 97%;
		margin: 0 auto 60rpx;

		.posimg {
			position: absolute;
			z-index: 99;
			left: 0rpx;
			top: -20rpx;
			width: 102%;
		}
	}

	.reach {
		height: calc(100vh - 250rpx);
	}

	.sw_choose_default {
		display: inline-block;
		padding-right: 50rpx;
	}

	.sw_choose {
		color: #F9FADA;
		-webkit-text-stroke: 3rpx #8A5E51;
		font-size: 36rpx;
	}

	.sw_nochoose {
		color: #A6A2A2;
	}
</style>